<template>
    <div class="my-tab">
        <!-- w100%  overflow-x: auto-->
        <div class="tab-wrapper">
            <!-- li.w * num -->
            <ul class="tab-list"
                :style="{width: (fieldData.length + 1) * tabWidth + 'px'}"
            >

                <tab-item
                        v-for="(item, index) of fieldData"
                        :key="index"
                        :index="index"
                        :tabIndex="tabIndex"
                        :message="item"
                        @changTabIndex="changTabIndex"
                >
                </tab-item>

            </ul>
        </div>
    </div>
</template>

<script>
    import TabItem from './Item'

    import { ref } from 'vue';

    export default {
        name: "MyTab",
        props: {
            fieldData: Array,
            tabIndex: Number
        },
        components: {
            TabItem
        },

        setup(props, context) {
            const tabWidth = ref(120)

            const changTabIndex = (index) => {
                context.emit('changTabIndex', index)
            }

            return {
                changTabIndex,
                tabWidth
            }
        }
    }
</script>

<style lang="scss" scoped>

    .my-tab {
        height: 35px;
        background-color: #fff;
        border-bottom: #eee;
        overflow: hidden;

        .tab-wrapper {
            height: 43px;
            cursor: pointer;
            overflow-x: auto;
            overflow-y: hidden;

            .tab-list {
                height: 35px;

                .tab-item {
                    float: left;
                    width: 120px;
                    height: 100%;
                    font-size: 14px;
                    text-align: center;
                    line-height: 35px;
                    box-sizing: border-box;

                    &.current {
                        color: #23b8ff;
                        border-bottom: 2px solid #23b8ff;
                    }
                }
            }
        }
    }

</style>